<template>
  <div class="btn userPage">
    <!-- 面包屑-->
     <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>>
      </el-breadcrumb>
    </div>
    <!-- 头部-->
    <!--<el-form ref="form" :model="form">-->
    <!--<el-form-item label="查">-->
    <!--<el-input v-model="form.stu_name" placeholder="输入用户的姓名或手机号"></el-input>-->
    <!--</el-form-item>-->
    <!--</el-form>-->
    <!-- 添加的弹出框-->
    <el-card style="margin-bottom: 20px">
      <div class="lefted">
        <el-input
          type="text"
          v-model="searchValue"
          id="chaxun"
          class="search_input"
          placeholder="用户名或电话"
        />
        <el-button type="primary" @click="search">查询</el-button>
      </div>
      <el-button
        type="primary"
        @click="dialogFormVisible = true"
        style="float: right"
        class="righted"
        >添加</el-button
      >
    </el-card>

    <div class="lineHeightBtn">
      <el-dialog
        class="tanChu"
        title="添加用户"
        :visible.sync="dialogFormVisible"
        style="margin-top: 3vh"
      >
        <el-form :model="form">
          <el-form-item label="用户名">
            <el-input
              v-model="form.user_username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="form.user_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="form.user_phonenumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input v-model="form.user_number" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车型">
            <el-input v-model="form.user_cartype" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="form.user_idcard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="发动机号">
            <el-input
              v-model="form.user_engine_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="被保险人">
            <el-input v-model="form.user_insured" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="form.userDescription"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="保险公司">
            <el-select
              v-model="form.user_insurance_name"
              placeholder="请选择保险公司"
            >
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投保日期">
            <el-date-picker
              v-model="form.user_insurance_date"
              type="date"
              placeholder="选择日期"
              @change="formatTime"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">添 加</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改的弹出框-->
    <div>
      <el-dialog title="修改用户" :visible.sync="dialogFormEditVisible">
        <el-form :model="editform">
          <el-form-item label="用户名">
            <el-input
              v-model="editform.user_username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input
              v-model="editform.user_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="editform.user_phonenumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input
              v-model="editform.user_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车型">
            <el-input
              v-model="editform.user_cartype"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input
              v-model="editform.user_idcard"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="发动机号">
            <el-input
              v-model="editform.user_engine_number"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="被保险人">
            <el-input
              v-model="editform.user_insured"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="保险公司">
            <el-select
              v-model="editform.user_insurance_name"
              placeholder="请选择保险公司"
            >
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投保日期">
            <el-date-picker
              v-model="editform.user_insurance_date"
              type="date"
              placeholder="选择日期"
              @change="formatTime"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormEditVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">保 存</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 列表-->
    <el-table :data="userData" border style="width: 100%" :header-cell-style="headClass" :cell-style="rowClass">
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="userId" label="ID"> </el-table-column>
      <el-table-column prop="userUsername" label="用户名">
      </el-table-column>
      <el-table-column prop="userPhonenumber" label="手机号">
      </el-table-column>
      <el-table-column prop="userLasttime" label="最后登录时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button class="colorBtn" type="primary" @click="edit(scope.row)"
            >修改</el-button
          >
          <el-button
            class="colorBtn"
            type="danger"
            @click="del(scope.row.userId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="5"
      :current-page="currentPage"
      @current-change="changes"
      :total="length"
    >
      <!--:size-change="func4()"-->
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "user", //用户管理部分
  data: function() {
    return {
      userData: [],
      dialogFormVisible: false,
      dialogFormEditVisible: false,
      form: {
        //数据列表
        user_id: "",
        user_username: "", //用户名
        user_name: "", //user_name联系人
        user_phonenumber: "", //电话
        user_lasttime: "", //最后登录时间
        user_number: "", //车牌号
        user_engine_number: "", //发动机号
        user_cartype: "",
        user_idcard: "",
        user_insured: "",
        user_insurance_date: "", //投保日期
        user_insurance_time: "",
        user_insurance_name: "", //保险公司
        userDescription: "" //备注
      },
      editform: {
        //修改列表
        user_id: "",
        user_username: "", //用户名
        user_name: "", //user_name联系人
        user_phonenumber: "", //电话
        user_lasttime: "", //最后登录时间
        user_number: "",
        user_engine_number: "", //发动机号
        user_cartype: "",
        user_idcard: "",
        user_insured: "",
        user_insurance_date: "", //投保日期
        user_insurance_name: "", //保险公司
        userDescription: "" //备注
      },
      length: 10,
      pageID: 1, //默认是第一页开始显示列表
      currentPage: 1, //默认是第一页开始
      pageSize: 6,
      searchValue: ""
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    addUser: function() {
      this.getTimes();
      this.$axios
        .post(this.$api.clientManage.userManageer.insert, {
          userUsername: this.form.user_username,
          userName: this.form.user_name,
          userNumber: this.form.user_number,
          userPhonenumber: this.form.user_phonenumber,
          userCartype: this.form.user_cartype,
          userIdcard: this.form.user_idcard,
          userEngineNumber: this.form.user_engine_number,
          userInsured: this.form.user_insured,
          userInsuranceName: this.form.user_insurance_name,
          userDescription: this.form.userDescription,
          userInsuranceDate: this.form.user_insurance_time
        })
        .then(res => {
          //                    console.log('add_res = ',res);
          var result = res.data;
          //                    console.log('result = ',result);
          if (result.code == 0) {
            this.$alert(result.msg);
            this.dialogFormVisible = false;
            if (result.msg == "添加成功") {
              this.getList();
            }
          } else {
            this.$alert(result.message);
          }
        })
        .catch(err => {
          console.log("adderr = ", err);
          this.$alert("请求出错");
        });
    },
    rowClass() { //表格数据居中显示
      return "text-align:center"
    },
    headClass() { //表头居中显示
      return "text-align:center"
    },
    getList: function() {
      this.$axios
        .post(
            this.$api.clientManage.userManageer.findByPage,
          JSON.stringify({
            num: this.pageID,
            size: this.pageSize
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res);
          console.log("user_GetList_res data = ", res.data);
          var result = res.data;
          var len = result.data.total; //拿到总的数据条数
          this.length = len;

          console.log("result = ", result.data);
          if (result.code == 0) {
            this.userData = result.data.list;
            console.log("userData = ", this.userData);
          } else {
            alert(result.msg);
          }
        })
        .catch(err => {
          console.log("GETerr = ", err);
          this.$alert("请求出错");
        });
    },
    changes: function(val) {
      this.pageID = val;
      this.getList();
    },
    del: function(Id) {
      //发送删除请求
      console.log("del_Id =  ", Id);
      this.$axios
        .post(
            this.$api.clientManage.userManageer.delete,
          JSON.stringify({
            id: Id
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          var result = res.data;
          console.log("resultv = ", res);
          console.log("resultvc = ", result.values.code);
          if (result.values.code == 0) {
            this.$alert(result.values.msg);
            if (result.values.msg == "删除成功") {
              this.getList();
            }
          } else {
            alert(result.msg);
          }
        })
        .catch(err => {
          console.log(err);
          this.$alert("请求出错");
        });
    },
    edit: function(obj) {
      //                console.log(obj);
      this.dialogFormEditVisible = true;
      this.editform.user_id = obj.user_id;
      this.editform.user_username = obj.user_username;
      this.editform.user_phonenumber = obj.user_phonenumber;
      this.editform.user_lasttime = obj.user_lasttime;
      this.editform.user_number = obj.user_number;
      this.editform.user_name = obj.user_name;
      this.editform.user_cartype = obj.user_cartype;
      this.editform.user_idcard = obj.user_idcard;
      this.editform.user_engine_number = obj.user_engine_number;
      this.editform.user_insured = obj.user_insured;
      this.editform.user_insurance_name = obj.user_insurance_name;
      this.editform.user_insurance_date = obj.user_insurance_date;
    },
    search: function() {
      this.$axios
        .post(
            this.$api.clientManage.userManageer.find,
          JSON.stringify({
            userUserName: this.searchValue,
            userPhoneNumber: this.searchValue,
            num: this.pageID,
            size: this.pageSize
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log("SearchList_res data = ", res.data);
          var result = res.data;
          var len = result.data.total; //拿到总的数据条数
          this.length = len;
          console.log("this.length  =  ", this.length);
          //                    console.log('result = ',result.data);
          if (result.code == 0) {
            this.$message({
              message: result.msg,
              type: "success"
            });
            this.userData = result.data.list;
            console.log("userData = ", this.userData);
          } else {
            this.$message({
              message: result.msg,
              type: "warning"
            });
            this.driverData = [];
          }
        })
        .catch(err => {
          console.log("err = ", err);
          this.$alert("请求出错");
        });
    },
    save: function() {
      //将修改的数据直接发给服务器处理
      console.log("datdTransform = ", this.editform);
      this.$axios
        .post(
          this.$api.clientManage.userManageer.update,
          JSON.stringify({
            userUsername: this.editform.user_username,
            userName: this.editform.user_name,
            userNumber: this.editform.user_number,
            userPhonenumber: this.editform.user_phonenumber,
            userCartype: this.editform.user_cartype,
            userIdcard: this.editform.user_idcard,
            userEngineNumber: this.editform.user_engine_number,
            userInsured: this.editform.user_insured,
            userInsuranceName: this.editform.user_insurance_name,
            userDescription: this.editform.userDescription,
            userInsuranceDate: this.editform.user_insurance_time,
            userId: this.editform.user_id
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          var result = res.data;
          console.log("Editresult = ", result);
          if (result.code == 0) {
            this.$alert(result.msg);
            this.getList();
            this.dialogFormEditVisible = false;
          } else {
            this.$alert("出错了");
          }
        })
        .catch(err => {
          console.log("adderr = ", err);
          this.$alert("请求出错");
        });
    },
    getTimes: function time() {
      //获取当前的时间
      var time = new Date();
      var year = time.getFullYear();
      var mon = time.getMonth() + 1;
      var day = time.getDate();
      var hour = time.getHours();
      var min = time.getMinutes();
      var s = time.getSeconds();
      this.form.user_insurance_time =
        year + "-" + mon + "-" + day + " " + hour + ":" + min + ":" + s;
    }
  }
};
</script>

<!--<style>
.userPage .el-dialog {
  margin-top: 2vh !important;
}
</style>-->
<style scoped>
#chaxun {
  margin: 0 20px;
  font-size: 20px;
}
#lineHeight {
  line-height: 50px !important;
}
.lineHeightBtn {
  text-align: left;
  line-height: 65px !important;
}
.search_input {
  width: 300px;
  margin: 20px 10px;
}
.lefted {
  float: left;
}
/deep/ .el-card__body {
  padding: 0;
}
.righted {
  margin: 20px;
}
</style>
